<script lang="ts" setup>
import type { InfraCodegenApi } from '#/api/infra/codegen';
import { reactive, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import draggable from 'vuedraggable';
import { downloadCodegenWordDoc } from '#/api/infra/codegen';

/** 组件状态 */
const loading = ref(false);

interface CodeToWordData {
  systemName: string;
  systemOverview: string;
  codeCount: number;
  purpose: string;
  function: string;
  selectedTables: InfraCodegenApi.CodegenTable[];
}

const CodeToWordDataValue = reactive<CodeToWordData>({
  systemName: '',
  systemOverview: '',
  codeCount: 0,
  purpose: '',
  function: '',
  selectedTables: [],
});

/** 模态框实例 */
const [Modal, modalApi] = useVbenModal({
  footer: true,
  class: 'w-1/2',
  onOpened() {
    CodeToWordDataValue.selectedTables =
      modalApi.getData<InfraCodegenApi.CodegenTable[]>() || [];
  },
  onConfirm() {
    const hideLoading = message.loading({
      content: '正在导出代码到文档...',
      key: 'action_key_msg',
    });
    downloadCodegenWordDoc(
      CodeToWordDataValue.selectedTables.map((table) => table.id),
      CodeToWordDataValue.systemName,
      encodeURIComponent(CodeToWordDataValue.systemOverview),
      CodeToWordDataValue.codeCount,
      encodeURIComponent(CodeToWordDataValue.purpose),
      encodeURIComponent(CodeToWordDataValue.function),
    )
      .then((res) => {
        const blob = new Blob([res], { type: 'application/zip' });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `${CodeToWordDataValue.systemName}-文档.zip`;
        link.click();
        window.URL.revokeObjectURL(url);
        message.success({
          content: '代码生成成功',
          key: 'action_key_msg',
        });
      })
      .finally(() => {
        hideLoading();
      });
  },
});
</script>

<template>
  <Modal title="代码导出到Word文档">
    <div v-loading="loading">
      <a-form>
        <a-form-item label="系统名称">
          <a-input v-model:value="CodeToWordDataValue.systemName" />
        </a-form-item>
        <a-form-item label="系统概述">
          <a-textarea v-model:value="CodeToWordDataValue.systemOverview" />
        </a-form-item>
        <a-form-item label="源程序量">
          <a-input-number
            v-model:value="CodeToWordDataValue.codeCount"
            :min="0"
            controls-position="right"
          />
        </a-form-item>
        <a-form-item label="开发目的">
          <a-textarea v-model:value="CodeToWordDataValue.purpose" />
        </a-form-item>
        <a-form-item label="主要功能">
          <a-textarea
            type="text"
            v-model:value="CodeToWordDataValue.function"
          />
        </a-form-item>
        <a-form-item label="导出的表">
          <draggable
            v-model="CodeToWordDataValue.selectedTables"
            group="table"
            item-key="id"
          >
            <template #item="{ element }">
              <a-tag color="success">{{ element.businessName }}</a-tag>
            </template>
          </draggable>
        </a-form-item>
      </a-form>
    </div>
  </Modal>
</template>
